<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>班级管理</title>
	<link rel="stylesheet" href="../css/common2.css">
	<style>
		.search_img {
			position: absolute;
			right: 3%;
		}

		.one {
			width: 9%;
		}

		.two {
			width: 20%;
		}

		.three {
			width: 10%;
		}

		.importall {
			margin-left: 50px;
			margin-top: 20px;
		}

		.import_text {
			width: 200px;
			height: 35px;
			font-size: 14px;
		}

		.long-background-img {
			width: 120px;
			height: 35px;
			margin-left: 2%;
			background: url("../image/enter_longer.png") no-repeat center center !important;
		}
	</style>
</head>

<body>
	<div id="vue-root" style="margin-top: 30px;">
		<div v-if="able.add" class="add">
			<a href="educational_classes_item.html" style="color: white">添加班级</a>
		</div>
		<div class="refresh" onclick="location.reload()">刷新</div>
		<input placeholder="请输入班级名称" class="search" v-model="search.name" style="height: 33px;">
		<img src="../image/search.png" height="35" width="35" alt="" class="search_img" @click="getData0">
		<div v-if="able.import" class="importall" v-show="drop">
			<label class="delete" for="file" style="margin-left: -1%;margin-bottom: 15px;">导入数据</label>
			<a class="delete long-background-img" :href="url">下载导入模板</a>
		</div>
		<form enctype="multipart/form-data" id="form" ref="form" style="display: none;">
			<input type="file" name="file" id="file" @change="importExcel" ref="file"
				accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
		</form>

		<div class="table ">
			<table class="table_top">
				<thead>
					<tr>
						<th class="one">
							<input type="checkbox" class="check-box" v-model="all">
						</th>
						<th>序号</th>
						<th class="two">班级名称</th>
						<th class="two">班级主任</th>
						<th class="two">关联课程</th>
						<th class="two">上课教室</th>
						<th class="two">年级</th>
						<th class="two">人数/容量</th>
						<!-- <th>排课状态</th>
						<th>上课次数</th>
						<th>已授课时</th>
						<th class="two">支持在线选班</th>
						<th>上一次布置作业</th>
						<th>状态</th> -->
						<!-- <th v-if="able.edit" class="two">任教信息</th> -->
						<!-- <th class="two">学生人数</th> -->
						<th class="three">编辑/删除</th>
					</tr>
				</thead>
				<tbody id="list">
					<tr v-for="(classes,index) in list" :key="classes.id">
						<td class="one">
							<input type="checkbox" class="check-box" v-model="classes.checked">
						</td>
						<td><span v-text="index+1"></span> </td>
						<td class="two" v-text="classes.name"></td>
						<td class="two" v-text="classes.teacherName"></td>
						<td  v-text="classes.courseName"></td>
						<!-- <td v-if="able.edit" class="two">
							<a :href="'educational_classes_teacher.html?id='+classes.id">
								<button>详情</button>
							</a>
						</td> -->
						<!-- 上课教室 -->
						<td class="two" v-text="classes.roomName"></td>
						
						<td class="two" v-text="classes.gradeName"></td>
						
						<td class="two" v-text="classes.classCapacity"></td>
						<!-- <td  v-text=""></td>
						<td  v-text=""></td>
						<td class="two" v-text="classes.teachingHours"></td>
						<td class="two" v-text="classes.classSelection === 0 ? '否' : '是'"></td>
						<td  v-text=""></td>
						<td  v-text=""></td> -->
						<td class="three">
							<div class="option">
								<div v-if="able.edit" class="edit-icon option-icon">
									<a :href="'educational_classes_item.html?id='+classes.id"
										style="position: absolute; left: 20%; top: 30%;">
										<img class="img" height="20" width="20" src="../image/edit.png"
											onmouseover="this.src='../image/edit_light.png'"
											onmouseout="this.src='../image/edit.png'" />
									</a>
								</div>
								<div v-if="able.del" class="delete-icon option-icon" @click="del([classes.id])"
									style="right: 20%; top:30%;position: absolute;">
									<img class="img" src="../image/delete.png" height="20" width="20"
										onmouseover="this.src='../image/delete_light.png'"
										onmouseout="this.src='../image/delete.png'" />
								</div>
							</div>
						</td>
					</tr>
				</tbody>
			</table>

		</div>
		<br>
		<div class="delete" @click="batchDelete" v-if="able.del">批量删除</div>
		<div v-if="able.import" class="delete long-background-img" @click="importClasses">批量导入班级</div>
		<div v-if="able.import" class="delete long-background-img" @click="importClassesInfo">批量导入授课信息</div>
		<ul class="pagination" v-if="pages>1">
			<li>
				<a v-if="pageNum!=1" @click="pageNum=1">«</a>
				<a class="pages-jump" v-if="pageNum!=1" @click="pageNum--">‹</a>
				<a v-text="pageNum"></a>
				<a class="pages-jump" v-if="pageNum!=pages" @click="pageNum++">›</a>
				<a v-if="pageNum!=pages" @click="pageNum=pages">»</a>
			</li>
		</ul>

	</div>
	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/js/common.js"></script>
	<script src="/js/list.js"></script>
	<script src="/js/auth_util.js"></script>

	<script>

		var app = new Vue(merge({
			data: {
				drop: false,
				url: null,
				urls: {
					del: '/pc/classes/del'
				}
			},
			created: function () {
				var schoolId = top_params().id;
				if (!schoolId) {
					alert('未知学校');
					throw '未知学校';
				}
				this.schoolId = schoolId;
				this.urls.list = '/pc/classes/list/' + schoolId;
				this.getData();
				abled('classes', this);
			},
			methods: {
				importClasses: function () {
					this.drop = !this.drop;
					this.url = '/excel/classes.xls';
					this.urls.imports = '/pc/classes/import/' + this.schoolId;
				},
				importClassesInfo: function () {
					this.drop = !this.drop;
					this.url = '/excel/classes_info.xls';
					this.urls.imports = '/pc/classesInfo/import/' + this.schoolId;
				},
				delMsg: function (ids) {
					return '将删除班级内的学生数据，确定删除这' + ids.length + '项吗？';
				}
			}
		}));
	</script>

</body>

</html>